<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
  <div id="main" style="width: 800px; height:600px;"></div>
    <script src="/lib/echarts.min.js"></script>
<script>
  //数据
  const foodArr = [
  {name:"苹果",value:1330},
  {name:"香蕉",value:104344},
  {name:"火龙果",value:4310},
  {name:"荔枝",value:1350},
  {name:"榴莲",value:102343},
  {name:"山竹",value:1560},
  {name:"芭乐",value:1340},
  ]
  const myChart =echarts.init(document.querySelector('#main'))

  const option = {
    title:{
      text:"水果的售价",
    },
  legend:{
   right:'5%',
   data:['价格']
  },
  //绘制网格
  grid:{
    left:'20%',
  },
  xAxis:{
    data:foodArr.map( v => v.name)
},
yAxis:{
  splitLine:{
    lineStyle:{
      type:'dashed'
  }
}
},
//提示框组件
tooltip:{
  trigger:'axis'
},
series:[
  {
    name:'价格',
    type:'bar',
    data:foodArr.map( v => v.value)   
  }
],
color:['#3398DB']

}
myChart.setOption(option)
</script>
  </div>
</body>
</html>